<!-- 右侧用户 -->

<template>
  <EasyCard class="MaintainManage-RightUser" :title="MAP.WORD" noScroll>
    <el-autocomplete
      v-model="param.keyword"
      :fetch-suggestions="queryUser"
      :maxlength="10"
      placeholder="名称 / 手机号"
      prefix-icon="el-icon-search"
      popper-class="CoreWeb-FormInputTip-pop"
      size="small"
      clearable
      @select="toSelect"
    >
      <template #default="{ item }">
        <div class="CoreWeb-option">
          <div>{{ item.userName }}</div>
          <div class="CoreWeb-option-right">{{ item.userPhone }}</div>
        </div>
      </template>
    </el-autocomplete>

    <div v-for="item in fieldList" :key="item[0]" class="flex">
      <label>{{ item[0] }}</label>
      <span>{{ info[item[1]] }}</span>
    </div>

    <el-empty v-if="!fieldList.length" description="暂无用户" />
  </EasyCard>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'RightUser',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store), CORE.mixApiMenu('通讯录')],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      callback: null, // 回调方法
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 字段
     */
    fieldList() {
      return this.info.id ? this.DICT.FIELD : []
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听列表开关
     */
    needList(need) {
      if (!need) { // 关闭时
        const { readyList, list, INIT_PARAM, param, callback } = this
        if (readyList) INIT_PARAM.keyword = param.keyword // 查询成功则记录参数
        callback && callback(readyList ? list : [])
      }
    },
  },

  /**
   * 销毁之前 (先抽取再调用)
   */
  beforeDestroy() {
    this.INIT_PARAM.keyword = this.param.keyword = '' // 清空参数
    this.setInfo() // 清空用户
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 查询用户
     */
    queryUser(keyword, callback) {
      if (!keyword) { // 参数为空
        const EMPTY = []
        this.setInfo() // 清除用户
        callback(EMPTY) // 返回空列表
      } else if (keyword === this.INIT_PARAM.keyword) { // 参数不变
        callback(this.list) // 直接返回列表数据
      } else { // 新参数
        this.callback = callback // 记录回调函数
        this.startList() // 打开列表开关
      }
    },

    /**
     * 点击选择
     */
    toSelect(item) {
      this.setInfo(item)
      this.param.keyword = this.INIT_PARAM.keyword // 恢复查询的参数
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
